<template>
    <div>
        <!-- 头部 -->
        <div class="category-header">
            <router-link tag="span" to="/index"><svg t="1640164914293" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="64511" width="16" height="16"><path d="M744.3372563 1017.13692445c11.1289837 0 22.2701037-4.2477037 30.76551111-12.74311112 16.99081482-16.99081482 16.99081482-44.54020741 0-61.51888592L345.02883555 512.80099555 775.10276741 82.7392c16.99081482-16.97867852 16.99081482-44.54020741 0-61.51888592-16.99081482-16.99081482-44.52807111-16.99081482-61.51888593 0L252.74443852 482.04762075a43.51469037 43.51469037 0 0 0 0 61.53102222l460.83944296 460.81517036c8.48327111 8.49540741 19.62439111 12.74311111 30.75337482 12.74311112z" fill="#ffffff" p-id="64512"></path></svg></router-link>
            <div class="icont-header">排行榜</div>
        </div>

        <!-- 分类页 -->
        <div class="rank-content">
            <van-sidebar v-model="activeKey">
                <van-sidebar-item v-for="(item,index) in leftranklist" :key="index" :title="item" @click="btnClick(index)"/>
            </van-sidebar>
            <div class="index-content" v-if="ranklist">
                <ol class="book-ol book-ol-normal">
                <li class="book-li" v-for="(item,index) in ranklist" :key="index" @click="bookClick(item.id)">
                    <div class="book-layout">
                        <div class="book-cover"><van-image width="66" height="88" lazy-load :src="item.cover" /></div>
                        <!-- <img :src="item.cover" class="book-cover" alt="庆余年2天下太平"> -->
                        <div class="book-cell">
                            <h4 class="book-title">{{item.title}}</h4>
                            <p class="book-desc">{{item.content}}</p>
                            <div class="book-meta">
                                <div class="book-meta-l">
                                    <span class="book-author book-author-gray">{{item.author}}</span>
                                </div>
                                <div class="book-meta-r">
                                    <span class="tag-small-group origin-right">
                                        <p class="tag-small lightgreen">{{item.category}}</p>
                                        <p class="tag-small smallblue">95.73万</p>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
                
            </ol>
            </div>
        </div>
    </div>
</template>

<script>
import Vue from 'vue';
import { Lazyload } from 'vant';
Vue.use(Lazyload);
import {getBoyRank,getGirlRank,getFreeRank,getBestSeller,getPopularity,getEndRank,getPublish} from "../../api/rank"
export default {
    data(){
        return {
            activeKey: 0,
            ranklist:null,
            leftranklist:['男生榜','女生榜','免费榜','畅销榜','人气榜','完结榜','出版榜']
        }
    },
    methods:{
        bookClick(id){
            this.$emit('get-book-id',id)
            this.$router.push({name:'bookdetail',params:{ids:id}})
        },
        btnClick(id){
            if(id==0){
                getBoyRank().then(data=>{
                    // console.log("男生榜",data)
                    this.ranklist=data.list
                })
            }else if(id==1){
                getGirlRank().then(data=>{
                    // console.log('女生榜',data)
                    this.ranklist=data.list
                })
            }else if(id==2){
                getFreeRank().then(data=>{
                    // console.log('免费榜',data)
                    this.ranklist=data.list
                })
            }else if(id==3){
                getBestSeller().then(data=>{
                    this.ranklist=data.list
                })
            }else if(id==4){
                getPopularity().then(data=>{
                    this.ranklist=data.list
                })
            }else if(id==5){
                getEndRank().then(data=>{
                    this.ranklist=data.list
                })
                
            }else if(id==6){
                getPublish().then(data=>{
                    this.ranklist=data.list
                })
            }
        }
    },
    created(){
        
        //男生榜
        getBoyRank().then(data=>{
            // console.log("男生榜",data)
            this.ranklist=data.list
        })
    }
}
</script>

<style lang="less" scoped>
.category-header{
    width: 100%;
    height: 44px;
    background-color: #FC0E50;
    display: flex;
    align-items: center;
    span{
        display: block;
        width: 44px;
        height: 44px;
        text-align: center;
        line-height: 44px;
    }
    .icont-header{
        color: white;
        margin: auto;
        padding-right: 44px;
    }
}

.rank-content{
    width: 100%;
    display: flex;
    margin: auto;
    .index-content{
        width: 295px;
        height: 623px;
        overflow-y: scroll;
        white-space: nowrap;
        .book-ol{
        .book-li{
            background-color: white;
            .book-layout {
                display: block;
                padding: 1rem;
                position: relative;
                overflow: hidden;
                -webkit-transition: padding-left .15s;
                transition: padding-left .15s;
                .book-cover {
                    width: 4.125rem;
                    height: 5.5rem;
                    float: left;
                    margin-right: .5rem;
                    box-shadow: 0 4px 8px 0 rgba(51, 55, 61, 0.1);
                    border-radius: 2px;
                    font-size: 0;
                }
                .book-cell {
                    overflow: hidden;
                    .book-title {
                        line-height: 1.4;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        overflow: hidden;
                        font-size: 0.875rem;
                    }
                    .book-desc {
                        line-height: 1.1875rem;
                        height: 2.25rem;
                        font-size: 0.75rem;
                        margin-bottom: .6rem;
                        color: #808080;
                        overflow: hidden;
                    }
                    .book-meta {
                        font-size: .75rem;
                        overflow: hidden;
                        .book-meta-l {
                            float: left;
                            .book-author {
                                display: block;
                                color: #808080;
                                white-space: nowrap;
                                text-overflow: ellipsis;
                                max-width: 10em;
                                max-width: calc(100vw - 2rem - (176rem / 16));
                                font-size: 0.75rem;
                                overflow: hidden;
                            }
                        }
                        .book-meta-r {
                            float: right;
                            position: relative;
                            top: 0.05rem;
                            .tag-small-group {
                                display: inline-block;
                                vertical-align: middle;
                                position: absolute;
                                top: 0.04rem;
                                right: 0;
                                white-space: nowrap;
                                .tag-small {
                                    display: inline-block;
                                    line-height: 10px;
                                    padding: 0.25em 0.25em;
                                    margin: 0 0.15em;
                                    font-size: 10px;
                                    transform: scale(1);
                                    vertical-align: bottom;
                                    border: 1px solid #F16299;
                                }
                                .lightgreen {
                                    color: #F16299;
                                }   
                                .lightblue {
                                    color: #F69A48;
                                }
                                .smallblue {
                                    color: #65B1F5;
                                }
                                p{
                                    font-size: 5px;
                                    font-style: normal;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    }
}
</style>